/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-08 18:03:18
 * @LastEditTime: 2023-03-31 11:40:47
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import { Avatar, AvatarGroup, Flex, Icon } from '@chakra-ui/react';
import { setSelectedArtisticEffect } from 'features/parameters/store/presetSlice';
import { useMemo } from 'react';
import { TiDelete } from 'react-icons/ti';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
export const ArtisticEffectAvatarGroup = () => {
  const dispatch = useAppDispatch();

  const { selectedArtisticEffect, artisticEffect } = useAppSelector(
    (store) => store.preset
  );
  const selectedAvatar = useMemo(
    () =>
      artisticEffect.filter((i) => selectedArtisticEffect.indexOf(i.id) >= 0),
    [selectedArtisticEffect, artisticEffect]
  );
  return (
    <Flex>
      <AvatarGroup size="xs" max={5} mx={2}>
        {selectedAvatar.map((a, i) => (
          <Avatar key={a.name + i} name={a.name} src={a.imgUrl} />
        ))}
      </AvatarGroup>
      {selectedArtisticEffect.length > 0 && (
        <Icon
          fontSize="1.5rem"
          as={TiDelete}
          onClick={(e) => {
            e.stopPropagation();
            dispatch(setSelectedArtisticEffect([]));
          }}
        />
      )}
    </Flex>
  );
};

export default ArtisticEffectAvatarGroup;
